<template>
  <div class="city">
    <header><span class="iconfont icon-iconfontjiantouzuo" @click="goback"></span> <span>美生活</span></header>
    <div class="search"><span><span class="iconfont icon-sousuo"></span> 输入城市名称</span></div>
    <div class="definitionCity">
      <h5>定位城市</h5>
      <span>北京</span>
    </div>
    <div class="content">
      <van-index-bar sticky-offset-top=60 :index-list="indexList">
        <view v-for="(item,index) in py" :key="item">
          <van-index-anchor :index="item" />
          <van-cell v-for="(it) in cityItemList[index]" :key="it.id">{{it.name}}</van-cell>
        </view>
      </van-index-bar>
    </div>
  </div>
</template>

<script>
import {getCityList} from '../../service/index'
import '../../static/font_2197595_jc1thycheq/iconfont.css'
export default {
  data(){
    return {
      indexList:['A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','W','X','Y','Z'],
      cityList:{},
      py:[],
      cityItemList:[],
      params:{
        "mwAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtlvkvmcDeJYYmlRAvWFfpzmNsRAtBE3MwX343s3pX-CEpx4FY-BOG6EhX-ClgzoGOoVonDIu9yXaqB8w3X-CRowqIM31Y-B60EKuhzTXxhVaa98MkzjD1PVWBElPpSX-C7VqXUdtVdi1Jrm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
	      "mAuthToken": "uPCQvKl9RhX5r9SGP2noD0Ei0D3egOAN8IrKQ9lIY-BS0nZ8NKqZIMOel3oNkoUYqtlvkvmcDeJYYmlRAvWFfpzmNsRAtBE3MwX343s3pX-CEpx4FY-BOG6EhX-ClgzoGOoVonDIu9yXaqB8w3X-CRowqIM31Y-B60EKuhzTXxhVaa98MkzjD1PVWBElPpSX-C7VqXUdtVdi1Jrm1u2ZIbmPpChaX-Ce3QuHcg-Z-Z",
	      "fromw": 1401
      }
    }
  },
  async onShow(){
    let res = await getCityList(this.params)
    console.log(res)
    if(res.errNo === 0){
      this.cityList = res.data.list
      this.py = Object.keys(res.data.list)
      this.cityItemList = Object.values(res.data.list)
      console.log(this.py,this.cityItemList)
    }
  },
  methods:{
    select(index){
      console.log(index)
    },
    goback(){
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  padding: 50rpx 0 10rpx;
  border-bottom: 1px solid #ccc;
  z-index: 10;
  background: #fff;
  :nth-child(2){
    margin-left: 40%;
  }
}
.search {
  margin: 130rpx 20rpx 0rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 40rpx;
  background-color: #f1f1f1;
  >span{
    margin-left: 36%;
  }
}
.definitionCity{
  h5{
    background-color: #f4f4f4;
    margin: 30rpx 0;
    padding-left: 24rpx;
  }
  >span{
    margin-left: 24rpx;
    background: #ddd;
    display: inline-block;
    width: 200rpx;
    height: 48rpx;
    text-align: center;
  }
}
van-cell{
  display: block;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px solid #ccc;
  padding-left: 24rpx;
}
van-index-anchor{
  background: #ccc;
}
</style>